<template>
  <div class>
    <nav class="leftNav">
      <span class="logo">
        <span class="l1">
          <el-image
            style="width: 40px; height: 40px;border-radius: 50px;"
            :src="url"
            :preview-src-list="srcList"
          ></el-image>
        </span>
      </span>
      <div class="leftNavMuen">
        <ul class="J_menu_lists">
          <li class>
            <router-link to="/analysis" @click.native="showSubMenu(null)" active-class="active">
              <i class="iconfont icon-tongjifenxi"></i>
              分析
            </router-link>
          </li>
          <template v-for="item in routes">
            <li v-if="JSON.stringify(item)!='{}'" class :index="item.id" :key="item.id">
              <router-link @click.native="showSubMenu(item)" :to="item.path" active-class="active">
                <i class="iconfont icon-yonghu"></i>
                {{item.name}}
              </router-link>
              <nav
                class="leftNavMuen-2 z_index"
                v-if="subMenu.length > 1 && currentParentPath !=='/project'"
              >
                <h2 class="leftNavMuen-2-title">{{subName}}</h2>
                <ul>
                  <template v-for="(subItem,cindex) in subMenu">
                    <li v-if="JSON.stringify(subItem)!='{}'" :index="cindex" :key="cindex">
                      <router-link :to="subItem.path" class="subMenu" active-class="active1">
                        <i class="iconfont icon-store"></i>
                        {{subItem.name}}
                      </router-link>
                    </li>
                  </template>
                </ul>
              </nav>
            </li>
          </template>
          <li class>
            <router-link to="/setting" @click.native="showSubMenu(null)" active-class="active">
              <i class="iconfont icon-setting-permissions"></i>
              设置
            </router-link>
          </li>
        </ul>
      </div>
      <div class="endLogin">
        <a
          href="javascript:void(0);"
          @click="logout"
          @mouseenter="enter()"
          @mouseleave="leave()"
          :style="enterLeave?`background-color: ${theme};color:#ffffff`:''"
        >
          <i class="iconfont icon-X"></i>
          退出
        </a>
      </div>
      <a href="javascript:void(0);" id="test-color" data-value="#ffffff"></a>
    </nav>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "sidebarItem",
  props: {
    routes: {
      type: Array
    }
  },
  computed: {
    ...mapGetters(["theme"])
  },
  data() {
    return {
      isSub: false,
      currentPath: null,
      subMenu: [],
      subName: "",
      currentFirstPath: "",
      currentParentPath: "",
      url: "http://image1.sansancloud.com/yanshi/2019_7/30/10/14/31_988.jpg",
      srcList: [
        "http://image1.sansancloud.com/yanshi/2019_7/30/10/14/31_988.jpg"
      ],
      enterLeave: false
    };
  },
  watch: {
    $route(to, from) {
      // console.log("to to to");
      // console.log(to);
      // console.log("from from from");
      // console.log(from);
      if (this.isMainMenu(this.$route.path)) {
        // console.log("route");
        // console.log(this.$route.path);
        this.currentPath = this.$route.path;
        var strs = this.currentPath.split("/"); //字符分割
        this.currentParentPath = "/" + strs[1];
      }
      // 修改导航左侧颜色
      this.showLight();
    }
  },
  created() {
    this.currentPath = this.$route.path;
    this.currentFirstPath = this.$route.path;
    var strs = this.currentFirstPath.split("/"); //字符分割
    this.currentParentPath = "/" + strs[1];
  },
  mounted() {
    this.test();
    this.showLight();
  },
  methods: {
    test() {
      // console.log("this.$route.name");
      // console.log(this.$route.name);
      // console.log("this.$route.matched");
      // console.log(this.$route.matched);

      this.$store.getters.addRouters.forEach(item => {
        //先取出当前路由的顶级路由判断
        // console.log(this.$route.fullPath);
        var temPath = this.$route.fullPath.split("/")[1];
        // console.log(temPath);
        temPath = "/" + temPath + "/index";
        //当前路由跟重定向路由是否相对
        if (item.redirect == this.$route.fullPath) {
          this.subMenu = [];
          item.children.forEach(item2 => {
            var tmp = {
              path: item2.path,
              name: item2.name
            };
            this.subMenu.push(tmp);
          });
        } else {
          //如果不是二级路由
          //找到三级路由的父级路由，取出children赋值给子菜单
          // console.log(this.$route.fullPath);
          var temPath = this.$route.fullPath.split("/")[1];
          // console.log(temPath);
          temPath = "/" + temPath + "/index";
          // console.log(temPath);
          if (temPath == item.redirect) {
            this.subMenu = [];
            item.children.forEach(item2 => {
              var tmp = {
                path: item2.path,
                name: item2.name
              };
              this.subMenu.push(tmp);
            });
          }
        }
      });

      this.subName = this.$route.name;
    },
    isMainMenu(currentPath) {
      if (currentPath == "/wel/index") {
        return true;
      }
      for (var i = 0, len = this.routes.length; i < len; i++) {
        var path = this.routes[i].path + "/index";
        if (currentPath == path) {
          return true;
        } else {
          return false;
        }
      }
    },
    logout() {
      this.$confirm("是否退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" }).then(() => {
            // window.sessionStorage.clear()
            sessionStorage.removeItem("store");
            window.localStorage.clear();
          });
        });
      });
    },
    showSubMenu(item) {
      // console.log("二级路由");
      if (item != null) {
        this.currentFirstPath = item.path;
        var strs = item.path.split("/"); //字符分割
        this.currentParentPath = "/" + strs[1];
        this.subName = item.name;
        this.subMenu = item.children;
      } else {
        this.subName = null;
        this.subMenu = [];
      }
    },
    showLight() {
      // 颜色去vuex中取出
      this.$nextTick(() => {
        var allActive = document.querySelectorAll(".J_menu_lists>li>a");
        for (var i = 0; i < allActive.length; i++) {
          if (allActive[i].classList.contains("active")) {
            allActive[i].style.borderLeftColor = this.theme;
          } else {
            allActive[i].removeAttribute("style");
          }
        }
      });
    },
    enter() {
      this.enterLeave = true;
    },
    leave() {
      this.enterLeave = false;
    }
  }
};
</script>


<style scoped lang="less">
.leftNavMuen a.active {
  background: #f8f8f8;
  color: #13151a;
  border-left: 4px solid;
}
.subMenu {
  border: 0 solid #eee;
}

.active1 {
  color: #13151a;
  background: #fff;
  border-radius: 5px;
}

.leftNavMuen-2-title {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px solid #ddd;
  color: #888d99;
  text-align: center;
}
.leftNavMuen-2 {
  z-index: 100;
  position: fixed;
  left: 100px;
  top: 0;
  width: 120px;
  height: 100%;
  color: #5f626b;
  overflow-y: auto;
  line-height: 40px;
  font-size: 12px;
  background: url(http://asset.sansancloud.com/static/shangcheng/images/leftNav_2_bg.png)
    repeat-y #f8f8f8;
}
.endLogin a {
  position: fixed;
  bottom: 0;
  background-color: #f8f8f8;
  left: 0;
  bottom: 0;
  display: block;
  padding: 10px 26px;
  text-align: center;
  color: #5f626b;
}
.endLogin a:hover {
  // background-color: #36a3f7;
}
.leftNavMuen {
  margin-bottom: 40px;
}
.J_menu_lists {
  text-align: left;
}
.leftNavMuen-2 a {
  margin: 0 12px;
}
</style>

